<template>
    <div>
        <h2>{{title}}</h2>
        <div v-if="showMessage.length <= 0" class="order-container">{{noneMessage}}</div>
        <div v-else class="order-container">
            <div v-for="(item, index) in goods" :key="index" class="goods-item">
                <div class="goods-img" @click="goToUrl(showMessage[index])">
                    <img :src="item.imgUrl.url" alt="">
                </div>
                <div class="goods-name" @click="goToUrl(showMessage[index])">
                    <div>{{item.name}}</div>
                    <div class="price">￥{{item.price}}</div>
                </div>
                <div class="buttons">
                    <span>
                        <slot name="buy"></slot>
                    </span>
                    <span @click="remove(showMessage[index])">
                        <slot name="remove"></slot>
                    </span>
                    <span @click="del(showMessage[index])">
                        <slot name="del"></slot>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import MessageItem from "./childComps/MessageItem";
    import {sendwithpost} from "../../../network/profile";
    import {eventBus} from "../../../common/util";

    export default {
        name: "ProFileView",
        props: {
            title: {
                type: String,
                default: '',
            },
            noneMessage: {
                type: String,
                default: '',
            },
            showMessage: {
                type: Array,
                default() {
                    return []
                }
            },

        },
        data() {
            return {
                goods: []
            }
        },
        created() {
            if (this.showMessage.length == 0) {
                console.log(this.showMessage.length)
            } else {
                sendwithpost({
                    url: '/idtogoods',
                    data: {
                        idArr: this.showMessage
                    },
                }).then(res=> {
                    this.goods.push(...res.data.show)
                })
            }
        },
        components: {
            MessageItem
        },
        methods: {
            goToUrl(id) {
                this.$router.push({path: '/detail',query: {
                        goodsId: id,
                    }})
            },
            remove(id) {
                sendwithpost({
                    url: '/collection',
                    data: {
                        id: id,
                        isCollection: true
                    }
                }).then(res=> {
                    console.log(res)
                    if (res.data.res_code == 2) {
                        this.$store.commit('favorites', {id: id, addOrSub: true})
                        this.goods.splice(this.goods.indexOf(id), 1)
                    }
                })
            },
            del(id) {
                sendwithpost({
                    url: '/delfootfrint',
                    data: {
                        id: id
                    }
                }).then(res=> {
                    if (res.data.res_code == 2) {
                        this.$store.commit('footFrint', {
                            id: id,
                            plus: false
                        })
                        this.goods.splice(this.goods.indexOf(id), 1)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .order-container {
        padding-bottom: 20px;
        border-bottom: 2px solid #000000;
        text-align: center;
        font-size: 14px;
    }
    .goods-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dotted #cccccc;
        padding-bottom: 10px;
        margin-top: 20px;
    }
    .goods-img {
        width: 50px;
        margin-left: 30px;
        cursor: pointer;
        border: 1px solid #efefef;
        padding: 5px;
    }
    .goods-img img{
        width: 100%;
    }
    .goods-name {
        width: 270px;
        font-size: 12px;
        text-align: left;
        cursor: pointer;

    }
    .goods-name div:nth-child(1):hover {
        color: rgb(255,63,0);
    }
    .goods-name > * {
        line-height: 1.5em;
    }
    .price {
        font-weight: 600;
    }
    .buttons > * {
        margin: 0 10px;
        cursor: pointer;
    }
</style>